﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>地图投影转换</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <script src="../../libs/ol/proj4.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
            font-size:14px;
            font-family:"微软雅黑";
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 10px;
            left:10px;    
        }
        .container{
            float:left;
            width:48%;
            height:550px;
            margin:0 5px;
        }        
        .map{
            float:left;
            width:100%;
            height:100%;
            border:1px dashed red;
        }
    </style>
</head>
<body>
    <div id="menu">
        <label class="title" for="projection">
            地图投影转换演示：<button id="projection">投影转换</button>
        </label>
    </div> 
    <div class="container">
        <lable>投影坐标系（EPSG:3857）</lable>
        <div id="map1" class="map" ></div>
    </div>
    <div class="container">
        <lable>投影坐标系（ESRI:53009）</lable>
        <div id="map2" class="map" ></div>
    </div>
    <script type="text/javascript">
        var transformMap;
        var vectLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: '../data/geojson/countries-110m.json',
                format: new ol.format.GeoJSON()
            })
        });
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                vectLayer
            ],
            renderer: 'canvas',
            target: 'map1', //地图容器div的ID
            view: new ol.View({
                projection: ol.proj.get('EPSG:3857'), //投影坐标系
                resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
                center: [0, 0], 
                zoom: 0
            })
        });
        var graticule1 = new ol.Graticule({
            map: map
        });

        proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +
            '+b=6371000 +units=m +no_defs');

        // Configure the Sphere Mollweide projection object with an extent,
        // and a world extent. These are required for the Graticule.
        var sphereMollweideProjection = new ol.proj.Projection({
            code: 'ESRI:53009',
            extent: [-9009954.605703328, -9009954.605703328,9009954.605703328, 9009954.605703328],
            worldExtent: [-179, -90, 179, 90]
        });

        //开始投影转换
        document.getElementById('projection').onclick = function () {
            if (transformMap == null || transformMap == undefined) {
                transformMap = new ol.Map({
                    layers: [
                        new ol.layer.Vector({
                            source: new ol.source.Vector({
                                url: '../data/geojson/countries-110m.json',
                                format: new ol.format.GeoJSON()
                            })
                        })
                    ],
                    renderer: 'canvas',
                    target: 'map2',
                    view: new ol.View({
                        projection: sphereMollweideProjection, //投影坐标系
                        resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
                        center: [0, 0], 
                        zoom: 0
                    })
                });
                var graticule = new ol.Graticule({
                    map: transformMap
                });
            }
        };

    </script>
</body>
</html>
